<!DOCTYPE html>
<html>
<head>
	<title></title>

</head>
<body>
<input type="checkbox" value="1" class="kk" kk="333" id="kk" /> 
<input type="button" value="2" id="btn"/> 

<div style="width:300px;">
	<ul>
		<li><span style="width:80%;display:inline-block;">aaa</span><span>bbb</span></li>
	</ul>
</div>
<canvas id="myCanvas" width="500px" height="400px"></canvas>
<canvas id="myCanvas2"width="400"height="400"style="border:1px solid #c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.</canvas>
</body>
<script type="text/javascript" src="./js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<!-- <script type="text/javascript" src="js/utils_test.js"></script> -->
<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	//画线
	cxt.moveTo(10,10);
	cxt.lineTo(150,50);
	cxt.lineTo(10,20);
	cxt.stroke();
	cxt.lineTo(400,400);
	cxt.stroke();
	//画矩形
	cxt.fillStyle="#FF0000";
	cxt.fillRect(100,100,150,75);

	//画圆
	cxt.fillStyle="#FF0000";
	cxt.beginPath(); 
	cxt.arc(70,18,15,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();

	//渐变
	c=document.getElementById("myCanvas2");
	cxt=c.getContext("2d");
	var grd=cxt.createLinearGradient(0,0,175,50);
	grd.addColorStop(0,"#FF0000");
	grd.addColorStop(1,"#00FF00");
	cxt.fillStyle=grd;
	cxt.fillRect(0,0,175,50);

	// 图片
	c=document.getElementById("myCanvas2");
	cxt=c.getContext("2d");
	var img=new Image();
	img.src="img/test.png";
	img.onload = function(){
		cxt.drawImage(img,0,100);
	}
</script>

</html>